<template>
	<div class='system-user-container'>
		<el-card shadow='hover'>
			<div class='system-user-search mb15'>
				<el-input size='default' placeholder='请输入用户名称' v-model="nickName" style='max-width: 180px'></el-input>
				<el-button size='default' type='primary' class='ml10' @click='onQuery'>
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button v-auth="'/system-admin/sys-user/add'" size='default' type='success' class='ml10' @click='onOpenAddUser'>
					<el-icon>
						<ele-FolderAdd />
					</el-icon>
					新增用户
				</el-button>
			</div>
			<el-table :data='tableData.records' style='width: 100%'>
				<el-table-column prop='id' type='index' label='序号' width='60' />
				<el-table-column prop='username' label='账户名称' show-overflow-tooltip></el-table-column>
				<el-table-column prop='nickName' label='用户昵称' show-overflow-tooltip></el-table-column>
				<el-table-column prop='deptName' label='部门' show-overflow-tooltip></el-table-column>
				<el-table-column prop='roleName' label='角色组' show-overflow-tooltip></el-table-column>
				<el-table-column prop='gender' label='性别' show-overflow-tooltip></el-table-column>
				<el-table-column prop='phone' label='手机号' show-overflow-tooltip></el-table-column>
				<el-table-column prop='email' label='邮箱' show-overflow-tooltip></el-table-column>
				<el-table-column prop='creationTime' label='创建时间' show-overflow-tooltip></el-table-column>
				<el-table-column label='操作' width='100'>
					<template #default='scope'>
						<el-button v-auth="'/system-admin/sys-user/edit'" size='small' type='text'
											 @click='onOpenEditUser(scope.row)'>修改
						</el-button>
						<el-button v-auth="'/system-admin/sys-user/del'" size='small' type='text' @click='onRowDel(scope.row)'>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change='onHandleSizeChange'
				@current-change='onHandleCurrentChange'
				class='mt15'
				:pager-count='5'
				:page-sizes='[10, 20, 30]'
				v-model:current-page='tableData.param.current'
				background
				v-model:page-size='tableData.param.size'
				layout='total, sizes, prev, pager, next, jumper'
				:total='tableData.total'
				:page-size='tableData.pages'
			>
			</el-pagination>
		</el-card>
		<AddUer ref='addUserRef' />
		<EditUser ref='editUserRef' />
	</div>
</template>

<script lang='ts'>
import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import AddUer from '/@/views/system/user/component/addUser.vue';
import EditUser from '/@/views/system/user/component/editUser.vue';
import { TableDataState } from '/@/utils/page';
import { useUserApi } from '/@/api/user';

// 定义接口来定义对象的类型
interface TableDataRow {
	id: number;
	deptName: string;
	deptId: number;
	role: string;
	roleName: string;
	username: string;
	nickName: string;
	gender: string;
	phone: string;
	email: string;
	creationTime: string;
}

interface TableQueryData {
	nickName: string;
}


export default defineComponent({
	name: 'systemUser',
	components: { AddUer, EditUser },
	setup() {
		const addUserRef = ref();
		const editUserRef = ref();
		const tableDataState = reactive<TableDataState<TableDataRow>>({
			tableData: {
				data: [],
				total: 0,
				pages: 0,
				loading: false,
				param: {
					current: 1,
					size: 10,
				},
			},
		});
		const queryDataState = reactive<TableQueryData>({
			nickName: '',
		});
		// 初始化表格数据
		const initTableData = async () => {
			await query();
		};
		const query = async () => {
			let queryInputData = {
				nickName: queryDataState.nickName,
				current: tableDataState.tableData.param.current,
				size: tableDataState.tableData.param.size,
			};
			let result = await useUserApi().getPage(queryInputData) as any;
			tableDataState.tableData.records = result['records'];
			tableDataState.tableData.total = result['total'];
			tableDataState.tableData.pages = result['pages'];
		};

		// 打开新增用户弹窗
		const onOpenAddUser = () => {
			addUserRef.value.openDialog();
		};
		// 打开修改用户弹窗
		const onOpenEditUser = (row: TableDataRow) => {
			editUserRef.value.openDialog(row);
		};
		// 删除用户
		const onRowDel = (row: TableDataRow) => {
			ElMessageBox.confirm(`此操作将永久删除用户：“${row.nickName}”，是否继续?`, '提示', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(async () => {
					const inputData = {
						id: [row.id],
					};
					await useUserApi().del(inputData);
					ElMessage.success('删除成功');
				})
				.catch(() => {
				});
		};
		// 分页改变
		const onHandleSizeChange = async (val: number) => {
			tableDataState.tableData.param.size = val;
			await query();
		};
		// 分页改变
		const onHandleCurrentChange = async (val: number) => {
			tableDataState.tableData.param.current = val;
			await query();
		};
		const onQuery = async () => {
			await query();
		};
		// 页面加载时
		onMounted(async () => {
			await initTableData();
		});
		return {
			addUserRef,
			editUserRef,
			onOpenAddUser,
			onOpenEditUser,
			onRowDel,
			onQuery,
			onHandleSizeChange,
			onHandleCurrentChange,
			...toRefs(tableDataState),
			...toRefs(queryDataState),
		};
	},
});
</script>
